<template>
  <view class="detail-content">
    <!--岗位信息-->
    <work-detail-card :data="worDetailMock.positionInfo" :detail="true"/>
    <!-- 招聘人信息-->
    <at-card>
      <view class="flex">
        <up-avatar text="面" random-bg-color/>
        <view class="ml-20">
          <view class="fw-600">{{ worDetailMock.interviewer.name }}</view>
          <view class="f-c-6 f-s-m">{{ worDetailMock.interviewer.phone }}</view>
        </view>
      </view>
    </at-card>
    <view class="fw-600 before-tag px-20 py-30">职位描述</view>
    <!--岗位描述-->
    <at-card>
      <view class="bottom-tag fw-600" style="width: fit-content;">职位介绍</view>
      <view v-html="worDetailMock.positionInfo.desc" class="pt-20"></view>
    </at-card>
    <!--警告-->
    <at-warning/>
    <!-- 公司信息-->
    <at-card>
      <view class="flex pb-30" @click="toPath(`/work/companyDetail/companyDetail?id=1`)">
        <up-avatar :src="worDetailMock.companyInfo.logo" random-bg-color shape="square"/>
        <view class="ml-20">
          <view>{{ worDetailMock.companyInfo.name }}</view>
          <view class="f-s-m f-c-9">{{ workCardTag }}</view>
        </view>
        <up-icon name="arrow-right" size="20" color="#9d9d9d" style="margin-left: auto"/>
      </view>
      <at-map :location="false" :data="worDetailMock.companyInfo"/>
    </at-card>
    <view class="fixed-bottom">
      <view class="flex-between px-20" style="background: #fff">
        <view class="flex">
          <view class="p-20 flex-c-center">
            <up-icon name="share" size="25" color="#fd7753"/>
            <view style="color: #fd7753" class="f-s-m">分享</view>
          </view>
          <view class="p-20 flex-c-center ml-20">
            <up-icon name="star" size="25" color="#fd7753"/>
            <view style="color: #fd7753" class="f-s-m">收藏</view>
          </view>
        </view>
        <view class="flex">
          <view class="comm-btn mr-20">立即沟通</view>
          <view class="deliver-btn">投递简历</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import WorkDetailCard from "@/work/components/work-detail-card.vue";
import {worDetailMock} from "@/utils/mock";
import {computed} from "vue";
import {toPath} from "@/utils/commonUtils";

const workCardTag = computed(() => {
  return worDetailMock.positionInfo.tag.split(',').join(' | ')
})
</script>


<style scoped lang="scss">
.detail-content {
  background: linear-gradient(to bottom, #fd7753 10%, #f5f5f5 10%);
  padding-bottom: 150rpx;
}

.comm-btn {
  background: #fff;
  color: #fd7753;
  padding: 15rpx 40rpx;
  background: #ffe2db;
  border-radius: 5rpx;

  &:active {
    background: #ffd8c9;
  }
}

.deliver-btn {
  background: #fd7753;
  color: #fff;
  padding: 15rpx 40rpx;
  border-radius: 5rpx;

  &:active {
    background: #fc8767;
  }
}
</style>
